<template>
	<!-- 搜索 -->
	<HyCard v-if="tableConfig.showSearch" :title="tableConfig.title">
		<Form ref="hyFormRef" :hyFormFields="searchFields">
			<template #custom>
				<div style="margin-left: auto">
					<el-button icon="Search" type="primary" @click="handleSearch" :loading="false"> 查询 </el-button>
					<el-button icon="RefreshLeft" style="margin-left: 24px" :loading="false" @click="handleRest"> 重置 </el-button>
				</div>
			</template>
		</Form>
	</HyCard>
	<div class="mt-5"></div>
	<HyCard>
		<!--  表格头部组件 -->
		<slot name="tableHeader"></slot>
		<!-- 表格组件 -->
		<el-table
			class="mt-5"
			:cell-style="{ textAlign: 'center' }"
			:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
			:data="state.tableData"
			style="width: 100%"
			v-loading="state.loading"
			:row-key="tableConfig.rowKey"
			@selection-change="handleSelectionChange"
			:highlight-current-row="tableConfig.singleSelect"
			@current-change="handleCurrentChange"
			border
		>
			<el-table-column v-if="tableConfig.multiple" type="selection" width="55" />
			<el-table-column fixed="left" type="index" label="序号" width="80" />
			<template v-for="item in tableColumns">
				<el-table-column
					v-if="!item.slot"
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:fixed="item.fixed ? item.fixed : false"
					:key="item.prop"
					show-overflow-tooltip
					:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
				></el-table-column>
				<el-table-column
					v-else
					:prop="item.prop"
					:label="item.label"
					:width="item.width"
					:fixed="item.fixed ? item.fixed : false"
					:key="item.prop + 1"
					show-overflow-tooltip
					:formatter="item.formatter ? (row: any, column: any, )=>item.formatter(row,column) : null"
				>
					<template v-slot="scope">
						<slot :name="item.slot" :row="scope.row" :column="scope.column"></slot>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<div v-if="!tableConfig.hiddenPageInfo" style="text-align: right; width: 100%; margin-top: 20px">
			<el-pagination
				v-model:current-page="state.pageInfo.current"
				:page-size="state.pageInfo.size"
				layout="total, sizes,prev, pager, next,jumper"
				:total="state.total"
				@current-change="currentChange"
				@size-change="sizeChange"
			/>
		</div>
	</HyCard>
</template>
<script setup lang="ts">
import HyCard from '/@/components/HyCard/index.vue';
import Form from '/@/components/Form/index.vue';
const props = defineProps({
	tableColumns: {
		type: Object,
		default: () => {
			return {};
		},
	},
	tableConfig: {
		default: () => ({
			rowKey: 'id', // 表格数据唯一标识
			showSearch: false, //是否显示搜索
			multiple: false, //是否多选
			singleSelect: false, //是否单选
			request: () => {}, //请求接口
			hiddenPageInfo: false, //是否隐藏分页信息
			title: '', //标题
			init: true, //是否初始化数据
		}),
		type: Object,
	},
	searchFields: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const { tableColumns, tableConfig, searchFields } = toRefs(props);

let state = ref<any>({
	pageInfo: {
		current: 1,
		size: 10,
	},
	searchInfo: {},
	total: 0,
	loading: false,
});

// 获取分页数据
const getTableData = async () => {
	state.value.loading = true;
	tableConfig.value
		.request({ ...state.value.pageInfo, ...state.value.searchInfo })
		.then((response: any) => {
			state.value.tableData = response?.records || response?.data?.records || response?.data?.list;
			state.value.total = response.data ? Number(response.data.total) : Number(response.total);
		})
		.finally(() => {
			state.value.loading = false;
		});
};
//是否初始化数据
onMounted(() => {
	if (props.tableConfig.init) handleRest();
});

//页码改变
const currentChange = (current: number) => {
	state.value.pageInfo.current = current;
	getTableData();
};

// 每页数量
const sizeChange = (size: number) => {
	state.value.pageInfo.size = size;
	getTableData();
};

const emits = defineEmits(['sendSelectValue']);
//多选
const handleSelectionChange = (value: any) => {
	emits('sendSelectValue', value);
};
//单选
const handleCurrentChange = (value: any) => {
	emits('sendSelectValue', value);
};
//搜索
const hyFormRef = ref<any>(null);
const handleSearch = () => {
	const searchInfo = hyFormRef.value?.hyForm;
	state.value = {
		...state.value,
		pageInfo: {
			current: 1,
			size: 10,
		},
		searchInfo,
	};
	getTableData();
};
//重置
const handleRest = () => {
	const searchFilesName = Object.keys(props.searchFields);
	let searchInfo: any = {};
	if (searchFilesName.length > 0) {
		searchFilesName.forEach((name: string) => {
			if (props.searchFields[name].defaultValue) {
				searchInfo[name] = props.searchFields[name].defaultValue;
			}
		});
	}
	hyFormRef.value.hyForm = searchInfo;
	state.value = {
		...state.value,
		pageInfo: {
			current: 1,
			size: 10,
		},
		searchInfo,
	};
	getTableData();
};

// 暴露
defineExpose({ getTableData, state });
</script>
<style scoped lang="scss"></style>
